<!DOCTYPE html>
<html lang="zh"   xmlns:th="http://www.thymeleaf.org"
   xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
	th:with="blogConfig=${@configTag.getConfigValueMap('zgblog')},article=${@articleTag.selectWebArticleHtmlById(articleId,'zgblog')}">

<head th:if="${article!=null}">
	<th:block th:include="zgblog/blog_include :: blogHeader(title=${article.articleTitle},
keywords=${article.keywords},
description=${article.description},
blogConfig=${blogConfig})" />
	<th:block th:include="zgblog/blog_include :: blog_reset_css" />
	<link th:href="@{/static/zgblog/css/global.css?a=uhvb}" rel="stylesheet">
	<link th:href="@{/static/zgblog/css/prism.css?a=uhvb}" rel="stylesheet">
	<link th:href="@{/static/zgblog/model/typo.css-2.1.2/typo.css}" rel="stylesheet">

	<style>
		a {
			text-decoration: none !important;
		}

		.markdown-toc {
			padding: 5px;
			top: 70px;
			left: 20px;
		}
	</style>
</head>

<head th:if="${article==null}">
	<th:block th:include="zgblog/blog_include :: blogHeader(title=${'你请求的文章我们没有找到到- '+blogConfig['oly.web.title']},
keywords='文章不存在,服务器故障',
description='文章可能不存在,文章没有找到,可能是服务器问题,可能文章已经删除',
blogConfig=${blogConfig})" />
</head>

<body>
	<th:block th:include="zgblog/blog_include::blogMainColumn()" />
	<!-- 主体部分 -->
	<section class="zgblog-main-box">
		<div class="layui-row ">
			<div class="layui-col-md7 layui-col-md-offset2 zgblog-left-box" id="miao-left">
				<div class="zgblog-left-content">
					<th:block th:if="${article!=null}" th:include="zgblog/blog_include::blogArticle(article=${article})" />
					<div class="layui-row" th:if="${article==null}">
						<div class="layui-col-md12 zgblog-box">
							<div class="layui-card-body" style="background-color: white;height: 90vh">
								文章不存在
							</div>
						</div>
					</div>

				</div>
			</div>
			<!-- 主体部分右边 -->
			<div class="layui-col-md3 zgblog-right-box">
				<th:block th:include="zgblog/blog_include::blogRightCommon" />
			</div>
		</div>
	</section>
	<script id="commentTemplate" type="text/html">
				<ul>
					{{# layui.each(d.rows, function(index, item){ }}
						<li>
							<div class="comment-parent">					
								<section>
									<div class="comment-head">
										<a class="comment-name" rel="nofollow"><img src="{{item.fromUser.avatar}}"><br />
											<span>{{item.fromUser.userName}}</span>
										</a>
										<span class="comment-ua">{{item.userBower}}</span>
										<span class="comment-index">{{(index+1)+(d.pageNum-1)*d.pageSize}}楼</span>
									</div>
									<br />
									<div class="comment-content">
										<div >{{item.content}}</div>
									</div>
									<div class="comment-footer">
										<span class="footer-time layui-text">
											{{item.createTime}}</span>
										<!--回复需要文章id,评论id,用户id-->
										<div class="layui-btn-group footer-reback comment-ok">
											<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-black reply-ok"
												data-comment="{{item.commentId}},{{item.articleId}},{{item.fromBy}}" title="回复"><i
													class="layui-icon layui-icon-reply-fill" aria-hidden="true"></i></button>
											<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-black  reply-like"
												data-comment_id="{{item.commentId}}" title="赞"><i
													class="layui-icon layui-icon-praise"></i></button>
											<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-black reply-nasty"
												data-comment_id="{{item.commentId}}" title="踩"><i
													class="layui-icon layui-icon-tread"></i></button>
										</div>
									</div>
								</section>
								<hr>
							</div>
							<div class="comment-child">
									<ul >
									{{# layui.each(item.childPage.rows, function(index2, item2){ }}
										<li>
											<section >
												<div class="comment-head">
													<a class="comment-name" rel="nofollow"><img
															src="{{item2.fromUser.avatar}}"><br />
														<span>{{item2.fromUser.userName}}</span>
													</a>
													<span class="comment-ua">{{item2.userBower}}</span>
													<span class="comment-index">{{(index2+1)+(item.childPage.pageNum-1)*item.childPage.pageSize}}#</span>
												</div>			
												<br />
												<div class="comment-content">
													<span>回复@<a src="javascript:void(0)">{{item2.replyUser.userName}}
														</a>：</span><span>{{item2.content}}</span>
												</div>
												<div class="comment-footer">
													<span class="footer-time layui-text">{{item2.createTime}}
													</span>
													<!--回复需要文章id,评论id,用户id-->
													<div class="layui-btn-group footer-reback comment-ok">
														<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-black reply-ok"
															data-comment="{{item2.parentId}},{{item2.articleId}},{{item2.fromBy}}" title="回复"><i
																class="layui-icon layui-icon-reply-fill" aria-hidden="true"></i></button>
													</div>
												</div>
											</section>
											<hr>
										</li>
									{{# }) }}
									</ul>
									{{# if(item.childPage.pages>1){let commentId=item.commentId; }}
									<div class="layui-box layui-laypage layui-laypage-default">
										{{# if(item.childPage.pageNum>1){let num=item.childPage.pageNum-1; }}
										<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},2,this)"  class="page-this"><i class="layui-icon layui-icon-prev" aria-hidden="true"></i></a>
										{{# } }}
										{{# if(item.childPage.pages>item.childPage.pageNum){let num=item.childPage.pageNum+1; }}	
										<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},2,this)" class="page-this" ><i class="layui-icon layui-icon-next" aria-hidden="true"></i></a>
										{{# } }}
									</div>
									{{# } }}		
							</div>		
						</li>
					{{#  }) }}
				</ul>
				{{# if(d.pages>1){ let articleId=$('#articleId').val();}}
			<div class="layui-box layui-laypage layui-laypage-default">
				{{# if(d.pageNum>1){ let num=d.pageNum-1; }}
				<a href="javascript:void(0)" onclick="getOnePage({{articleId}},{{num}},10)" class="page-this"><i class="layui-icon layui-icon-prev" aria-hidden="true"></i></a>
				{{# } }}
				{{# if(d.pages>d.pageNum){	let num=d.pageNum+1;
				 }}	
				<a href="javascript:void(0)" onclick="getOnePage({{articleId}},{{num}},10)" class="page-this" ><i class="layui-icon layui-icon-next" aria-hidden="true"></i></a>
				{{# } }}
			</div>
			{{# } }}
		</script>
		
	<script id="commentChild" type="text/html">
			<ul >
			{{# layui.each(d.rows, function(index2, item2){ }}
				<li>
					<section >		
						<div class="comment-head">
							<a class="comment-name" rel="nofollow"><img
									src="{{item2.fromUser.avatar}}"><br />
								<span>{{item2.fromUser.userName}}</span>
							</a>
							<span class="comment-ua">{{item2.userBower}}</span>
							<span class="comment-index">{{(index2+1)+(d.pageNum-1)*d.pageSize}}#</span>
						</div>
						<br />
						<div class="comment-content">
							<span>回复@<a src="javascript:void(0)">{{item2.replyUser.userName}}
								</a>：</span><span>{{item2.content}}</span>
						</div>
						<div class="comment-footer">
							<span class="footer-time layui-text">{{item2.createTime}}</span>
							<div class="layui-btn-group footer-reback comment-ok">
								<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-black reply-ok"
									data-comment="{{item2.parentId}},{{item2.articleId}},{{item2.fromBy}}" title="回复"><i
										class="layui-icon layui-icon-reply-fill" aria-hidden="true"></i></button>
						</div>
					</section>
					<hr>
				</li>
			{{# }) }}
			</ul>
			{{# if(d.pages>1){ let commentId=d.commentId; }}
			<div class="layui-box layui-laypage layui-laypage-default">
				{{# if(d.pageNum>1){ let num=d.pageNum-1; }}
				<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},10,this)" class="page-this"><i class="layui-icon layui-icon-prev" aria-hidden="true"></i></a>
				{{# } }}
				{{# if(d.pages>d.pageNum){	let num=d.pageNum+1;
				 }}	
				<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},10,this)" class="page-this" ><i class="layui-icon layui-icon-next" aria-hidden="true"></i></a>
				{{# } }}
			</div>
			{{# } }}		
	</script>
	<!-- 底部导航 -->
	<th:block th:include="zgblog/blog_include::blogBottom" />
	<th:block th:include="zgblog/blog_include::blog_footer_js" />
	<script th:src="@{/static/zgblog/js/prism.js?a=4}"></script>
	<script th:inline="JavaScript">
		var getOnePage, getTwoPage;
		$.ajaxSettings.async = false;
		layui.use(['element', 'layer', 'layedit', 'laytpl'], function () {
			var element = layui.element;
			var laytpl = layui.laytpl;
			var layedit = layui.layedit;
			var layer = this.layer;
			function toLogin() {
				layer.confirm('你还未登陆!', {
					btn: ['登陆', '取消'] //按钮
				}, function () {
					location.href = ctx + '/login?forward=/article/45';   
				}, function () {
					layer.close();
				});
			}
			//点赞，踩，分享，收藏，评分
			const generalRecordPrefix = ctx + "/general/record",
				handRecordPrefix = ctx + "/hand/record",
				commentHandPrefix = ctx + "/hand/comment",
				commentApiPrefix = ctx + "/api/comment",
				userUrl = ctx + "/user";
			getOnePage = function getOnePage(articleId, pageNum, pageSize) {
				$.get(commentApiPrefix + "/parentPage?pageNum=" + pageNum + "&pageSize=" + pageSize + "&typeId=" + articleId, function (res) {
					if (res.code == 0) {
						laytpl(commentTemplate.innerHTML).render(res.data, function (html) {
							$("#commentContent .post-comment-list").empty();
							$("#commentContent .post-comment-list").append(html);
						});
						checkHand();
					}
				});
			};
	
			
			getTwoPage = function getTwoPage(parentId, pageNum, pageSize, e) {
				let pa = $(e).closest('.comment-child');
				$.get(commentApiPrefix + "/childPage?pageNum=" + pageNum + "&pageSize=" + pageSize + "&parentId=" + parentId, function (res) {
					if (res.code == 0) {
						res.data.commentId = parentId;
						laytpl(commentChild.innerHTML).render(res.data, function (html) {
							pa.empty();
							pa.append(html);
						});
						checkHand();
					}
				});
			}
			const userId = $('#userId').val();
			const articleId = $('#articleId').val();
			const postRecord = {
				lookRecord: function () {
					this.ajaxPost();
				},
				likeRecord: function () {

				},
				nastyRecord: function () {

				},
				shareRecord: function () {

				},
				scoreRecord: function () {

				},
				collectRecord: function () {

				},
				ajaxPost: function (url, data, callback) {
					$.post(url, data, function (result) {
					});
				}
			};
			$.post(generalRecordPrefix + "/addLookRecord", {
				articleId: articleId
			}, function (result) {

			});
			$("#post-like").click(function () {
				if (userId == '') {
					toLogin();
				} else {
					$.post(handRecordPrefix + "/addLikeRecord", {
						articleId: articleId
					}, function (result) {
						layer.msg(result.msg);
					});
				}
			});
			$("#post-nasty").click(function () {
				if (userId == '') {
					toLogin();
				} else {
					$.post(handRecordPrefix + "/addNastyRecord", {
						articleId: articleId
					}, function (result) {
						layer.msg(result.msg);
					});
				}
			});
			//编辑器索引
			var ind;
			$("#commentContent").on('click', '.reply-ok', function () {
				var commentData = $(this).data().comment.split(","); // 在每个逗号(,)处进行分解。
				var dataObj = {
					'type': 'ARTICLE',
					'parentId': commentData[0],
					'typeId': commentData[1],
					'replyBy': commentData[2],
					'fromBy': userId
				};
				if (userId == '') {
					toLogin();
				} else {
					$.get(userUrl + "/isLogin/" + userId, function (result) {
						if (result.code == 200) {
							layer.open({
								type: 1,
								title: '评论',
								closeBtn: 0, //不显示关闭按钮
								anim: 2,
								area: '340px',
								offset: '100px',
								shadeClose: true, //开启遮罩关闭
								content: '<div ><textarea id="commentEdit" style="display: none;"></textarea></div>',
								success: function (layero, index) {
									ind = layedit.build('commentEdit', {
										tool: [
											'strong' //加粗
											, 'italic' //斜体
											, 'underline' //下划线
											, 'del' //删除线
											, '|' //分割线
											, 'left' //左对齐
											, 'center' //居中对齐
											, 'right' //右对齐
											, 'link' //超链接
											, 'unlink' //清除链接
										]
									}); //建立编辑器 
								},
								btn: ['取消', '评论'],
								yes: function (index, layero) {
									layer.close(index);
								},
								btn2: function (index, layero) {
									var content = layedit.getContent(ind);
									if (content == '') {
										layer.msg("评论不能为空！");
									} else {
										dataObj['content'] = content;
										$.post(commentHandPrefix + "/addComment", dataObj, function (
											result) {
											if (result.code == 0) {
												layer.msg("文章已评论,同步中,请稍后查看!");
											} else {
												layer.msg(result.msg);
											}
										})
									}
								},
							});
						} else {
							location.reload();
						}
					})
				}
			});
			$("#commentContent").on('click', '.reply-like', function () {
				let commentId = $(this).data().comment_id;
				let _this = this;
				var dataObj = {
					'commentId': commentId
				};
				if (userId == '') {
					toLogin();
				} else {
					$.get(userUrl + "/isLogin/" + userId, function (result) {
						if (result.code == 200) {
							$.post(commentHandPrefix + "/addCommentLike", dataObj, function (
								result) {
								if (result.code == 200) {
									let c_color = $(_this).find('i').css("color") == "rgb(255, 0, 0)" ? "rgb(57, 61, 73)" : "rgb(255, 0, 0)";
									$(_this).find('i').css("color", c_color);
									layer.msg(result.msg);
								} else {
									layer.msg(result.msg);
								}
							})

						} else {
							location.reload();
						}
					})
				}
			});
			$("#commentContent").on('click', '.reply-nasty', function () {
				var commentId = $(this).data().comment_id; // 在每个逗号(,)处进行分解。
				let _this = this;
				var dataObj = {
					'commentId': commentId
				};
				if (userId == '') {
					toLogin();
				} else {
					$.get(userUrl + "/isLogin/" + userId, function (result) {
						if (result.code == 200) {
							$.post(commentHandPrefix + "/addCommentNasty", dataObj, function (
								result) {
								if (result.code == 200) {
									let c_color = $(_this).find('i').css("color") == "rgb(255, 0, 0)" ? "rgb(57, 61, 73)" : "rgb(255, 0, 0)";
									$(_this).find('i').css("color", c_color);
									layer.msg(result.msg);
								} else {
									layer.msg(result.msg);
								}
							})

						} else {
							location.reload();
						}
					})
				}
			});
			function checkHand() {
				if (userId != null) {
					if (userId == "") {

					} else {
						$.get(commentHandPrefix + "/listCommentHandByTypeId/" + articleId,
							function (result) {
								if (result.data != null) {
									$.each(result.data, function (i, ele) {
										if (ele.visible == 0) {
											$(".reply-like").each(function () {
												if (ele.commentId == $(this).data().comment_id) {
													$(this).find('i').css("color", "red");
												}

											});
										}
										else if (ele.visible == 1) {
											$(".reply-nasty").each(function () {
												if (ele.commentId == $(this).data().comment_id) {
													$(this).find('i').css("color", "blue");
												}

											});
										}

									})
								}
							})

					}

				}
			}
			checkHand();
		});
	</script>
</body>

</html>